<template>
    <div>
        <el-collapse v-model="activeNames" accordion>
            <el-collapse-item title="查询条件(可点击收起)" name="1">
                <el-form :model="form" ref="searchForm" label-width="100px">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="开始日期" prop="begin">
                                <el-date-picker
                                    type="date"
                                    v-model="form.begin"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择查询开始日期"
                                    :picker-options="pickerOptionsStart"
                                    @change="changeEnd"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="结束日期" prop="end">
                                <el-date-picker
                                    type="date"
                                    v-model="form.end"
                                    format="yyyy 年 MM 月 dd 日"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择查询结束日期"
                                    :picker-options="pickerOptionsEnd"
                                    @change="changeStart"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="班次" prop="shift">
                                <el-select v-model="form.shift" placeholder="请选择查询班次" filterable clearable>
                                    <el-option label="早班" value="1"></el-option>
                                    <el-option label="晚班" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="人员" prop="user">
                                <el-select v-model="form.user" placeholder="请选择查询人员" filterable clearable>
                                    <el-option v-for="user in storeUserList" :key="user.id" :label="user.name" :value="user.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="交接内容" prop="content">
                                <el-input v-model="form.content" placeholder="请输入查询交接内容"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4" :offset="11">
                            <el-button type="primary" @click="searchHandover" :loading="loading">查询</el-button>
                            <el-button @click="reset('searchForm')">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-collapse-item>
        </el-collapse>

        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%; margin-top: 15px"
            :default-sort="{ prop: 'date', order: 'descending' }"
            @sort-change="orderBy"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-table-column type="expand" label="详情">
                <template slot-scope="props">
                    <el-form label-position="left" inline>
                        <el-form-item :label="index + 1 + ' . '" :key="index" v-for="(content, index) in props.row.Contents" style="width: 100%">
                            <span v-html="keywordRedColor(content.content)"></span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号">
                <template slot-scope="scope">
                    <span>{{ (form.page - 1) * form.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" sortable="custom"></el-table-column>
            <el-table-column prop="store_id" label="店别" sortable="custom" v-if="role === 'ADMIN'">
                <template slot-scope="scope">
                    <span>{{ scope.row.User.Store.store_no }} {{ scope.row.User.Store.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="shift" label="班次" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.shift === 1 ? '早班' : '晚班' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="user_id" label="人员" sortable="custom">
                <template slot-scope="scope">
                    <span>{{ scope.row.User.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="nr_begin" label="日结开始" sortable="custom"></el-table-column>
            <el-table-column prop="nr_end" label="日结结束" sortable="custom"></el-table-column>
            <el-table-column prop="temperature" label="温度" sortable="custom"></el-table-column>
            <el-table-column prop="humidity" label="湿度" sortable="custom"></el-table-column>
            <el-table-column label="操作" fixed="right" v-if="role === 'EDP'">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="$router.push({ name: 'contentEdit', params: { id: scope.row.id } })"
                        >编辑</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-row :gutter="20" style="padding: 10px 0">
            <el-col :span="24">
                <el-pagination
                    background
                    style="float: right"
                    layout="prev, pager, next, sizes, total, jumper"
                    :page-sizes="[1, 5, 10, 15, 20]"
                    :page-size="form.pageSize"
                    :current-page="form.page"
                    :total="total"
                    @current-change="pageChange"
                    @size-change="sizeChange"
                ></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
    name: 'handover',
    data() {
        return {
            loading: false,
            activeNames: '1',
            tableData: [],
            pickerOptionsStart: {},
            pickerOptionsEnd: {},
            form: {
                page: 1,
                pageSize: 10,
                begin: null,
                end: null,
                shift: null,
                user: null,
                content: '',
                prop: 'date',
                order: 'DESC'
            },
            total: null,
            storeUserList: []
        }
    },
    computed: {
        role() {
            return this.$store.getters.user.role
        }
    },
    created() {
        Object.assign(this.form, JSON.parse(sessionStorage.getItem('handover')))
        this.searchHandover()
        this.getUserList()
    },
    methods: {
        changeStart() {
            this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
                disabledDate: time => {
                    return this.form.end ? time.getTime() >= dayjs(this.form.end) : null
                }
            })
        },
        changeEnd() {
            this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
                disabledDate: time => {
                    return time.getTime() <= dayjs(this.form.begin)
                }
            })
        },
        reset(formName) {
            this.$refs[formName].resetFields()
        },
        async getUserList() {
            const response = await this.$http.get('/storeUserList')
            if (response && response.code === 0) {
                this.storeUserList = response.returnObject
            }
        },
        async searchHandover() {
            sessionStorage.setItem('handover', JSON.stringify(this.form))
            this.loading = true
            const response = await this.$http.get('/handoverList', {
                params: this.form
            })
            if (response && response.code === 0) {
                this.total = response.returnObject.count
                this.tableData = response.returnObject.rows
            }
            this.loading = false
        },
        pageChange(value) {
            this.form.page = value
            this.searchHandover()
        },
        sizeChange(value) {
            this.form.pageSize = value
            this.searchHandover()
        },
        orderBy(column) {
            if (column.order === 'descending') {
                this.form.prop = column.prop
                this.form.order = 'DESC'
            } else if (column.order === 'ascending') {
                this.form.prop = column.prop
                this.form.order = 'ASC'
            } else {
                this.form.prop = null
                this.form.order = null
            }
            this.searchHandover()
        },
        keywordRedColor(value) {
            if (this.form.content) {
                let reg = new RegExp(this.form.content, 'g')
                return value.replace(reg, `<span style="color: red">${this.form.content}</span>`)
            } else {
                return value
            }
        }
    }
}
</script>

<style scoped></style>
